<template>
	<div class="my-chart-data-display">
		<n-scrollbar style="max-height: 570px">
			<div class="go-mr-3">
				<div>
					<setting-item-box name="主体信息">
						<setting-item name="接口名称">
							<n-input size="small" :placeholder="dataPondName || '暂无'" disabled />
						</setting-item>
						<setting-item name="接口类型">
							<n-input size="small" :placeholder="requestHttpType || '暂无'" disabled />
						</setting-item>
					</setting-item-box>

					<setting-item-box>
						<setting-item name="组件间隔">
							<n-input size="small" :placeholder="`${requestInterval || '暂无'}`" disabled>
								<template #suffix>
									{{ requestIntervalUnit }}
								</template>
							</n-input>
						</setting-item>
					</setting-item-box>
					<setting-item-box name="接口地址" alone>
						<n-input size="small" :placeholder="requestUrl || '暂无'" disabled />
					</setting-item-box>
				</div>
				<n-divider />
				<setting-item-box name="类型">
					<setting-item name="配置类型">
						<n-input size="small" :placeholder="requestContentTypeObj[requestContentType]" disabled></n-input>
					</setting-item>
					<setting-item name="body 类型" v-if="requestContentType === 0">
						<n-input size="small" :placeholder="requestParamsBodyType" disabled></n-input>
					</setting-item>
				</setting-item-box>
				<div v-if="requestContentType === 0">
					<n-tabs type="line" animated v-model:value="tabValue">
						<n-tab v-for="item in RequestParamsType" :key="item" :name="item" :tab="item"> {{ item }} </n-tab>
					</n-tabs>
					<!-- 各个页面 -->
					<div>
						<div v-if="tabValue !== 'Body'">
							<display-table class="m-t-10" :target="requestParams[tabValue]"> </display-table>
						</div>

						<!-- 选择了 body -->
						<div v-else>
							<!-- 为 none 时 -->
							<n-card class="m-t-10" v-if="requestParamsBodyType === 'none'">
								<n-text depth="3">该接口没有 Body 体</n-text>
							</n-card>

							<!-- 具有对象属性时 -->
							<template
								v-else-if="requestParamsBodyType === 'form-data' || requestParamsBodyType === 'x-www-form-urlencoded'"
							>
								<display-table class="m-t-10" :target="requestParams.Body[requestParamsBodyType]"></display-table>
							</template>

							<!-- json  -->
							<template v-else-if="requestParamsBodyType === 'json'">
								<n-card size="small">
									<n-code :code="requestParams.Body[requestParamsBodyType] || '暂无内容'" language="json"></n-code>
								</n-card>
							</template>

							<!-- xml  -->
							<template v-else-if="requestParamsBodyType === 'xml'">
								<n-code :code="requestParams.Body[requestParamsBodyType] || ''" language="html"></n-code>
							</template>
						</div>
					</div>
				</div>
				<!-- SQL 请求 -->
				<div v-else>
					<n-code :code="requestSQLContent.sql || ''" language="sql"></n-code>
				</div>
			</div>
		</n-scrollbar>
	</div>
</template>

<script setup>
import displayTable from './displayTable.vue';

const props = defineProps({
		targetData: Object
	}),
	requestContentTypeObj = {
		0: '普通请求',
		1: 'SQL 请求'
	},
	RequestParamsType = ['Params', 'Body', 'Header'];

const {
		dataPondName,
		requestHttpType,
		requestInterval,
		requestIntervalUnit,
		requestUrl,
		requestContentType,
		requestSQLContent,
		requestParams,
		requestParamsBodyType
	} = toRefs(props.targetData),
	tabValue = ref('Params');
</script>

<style lang="scss" scoped>
@include b('chart-data-display') {
	flex: 1;
}
</style>
